<template>
  <div>
    <h1>vue 动态组件使用</h1>
    <button @click="changeView('A')">切换到组件A</button>
    <button @click="changeView('B')">切换到组件B</button>
    <button @click="changeView('C')">切换到组件C</button>
    <component :is="currentView"></component>
  </div>
</template>
<script>
export default {
  components: {
    componentA: {
      template: '<div>组件A</div>'
    },
    componentB: {
      template: '<div>组件B</div>'
    },
    componentC: {
      template: '<div>组件C</div>'
    }
  },
  data () {
    return {
      currentView: 'componentA'
    }
  },
  methods: {
    changeView (val) {
      this.currentView = 'component' + val
    }
  }
}
</script>
